<template>
  <view class="container">
	<xk-header :headerbg="true" class="header" :back="true" title="会议室"></xk-header>
	<view class="top-localtion">
		<u-row>
			<u-col span="11">
				<u-search shape="round" :showAction="false"></u-search>
			</u-col>
			<u-col span="1">
				<view><image style="width:60rpx;" mode="widthFix" :src="(imgUrl+'/wx/sx.png')" @click="select()"></image></view>
				<u-popup :show="show" mode="right" @close="close">
				  <view>
					  <view class="select-title">容纳人数</view>
					  <view class="content">
						  <block v-for="(item, index) in people" :key="index">
							<view class="list">
								<view :data-id="index" @click="choseNum" :class="item.chose ? 'screen add' : 'screen'">{{ item.name }}</view>
							</view>
						  </block>
					  </view>
					  <u-divider></u-divider>
					  <view class="select-title">设施配置</view>
					  <view class="content">
						  <block v-for="(item, index) in equipment" :key="index">
							<view class="list">
								<view :data-id="index" @click="choseEq" :class="item.chose ? 'screen add' : 'screen'">{{ item.name }}</view>
							</view>
						  </block>
					  </view>
					  <view class="bottom-button">
						  <u-button @click="confirm" type="primary" text="确定" customStyle="width: 110px;height: 40px;float:right;margin-right:30rpx;border-radius:23px;"></u-button>
						  <u-button @click="reset" type="warning" :plain="true" text="重置" customStyle="width: 110px;height: 40px;float:left;margin-left:30rpx;border-radius:23px;"></u-button>
					  </view>
				  </view>
				</u-popup>
			</u-col>
		</u-row>
	</view>
	<view class="searchinfo">
		<u-datetime-picker
			ref="datetimePicker"
			:show="showDate"
			v-model="dateValue"
			mode="date"
			@confirm="confirmDate"
			@cancel="showDate=false"
		></u-datetime-picker>
		<view @click="showDate=true" class="line1"><u-icon name="calendar" color="#A19999" size="24" :label="dateText1"></u-icon></view>
		<view class="line2"><u-icon name="clock" color="#A19999" size="20" :label="dateText2"></u-icon></view>
		<view class="line3"><button class="chaxunbtn" size="mini" type="primary">按时段查询</button></view>
	</view>
	<block v-for="(item, index) in meetingList" :key="index">
		<view class="meeting-box" @click="jumpToDetail(item)">
			<view :class="'zhuangtai bgcolor'+item.zt">{{item.ztname}}</view>
			<u-row>
				<u-col span="4">
					<view class="imgbox">
						<view><image class="imgurl" mode="widthFix" :src="item.pic" ></image></view>
					</view>
				</u-col>
				<u-col span="8">
					<view class="title1">{{item.name}}</view>
					<view class="title2">所在位置：{{item.weizhi}}</view>
					<view class="title3">容纳人数：{{item.renshu}}</view>
					<view class="title4">可选设施：{{item.sheshi}}</view>
					<view class="title5">计时费用：{{item.feiyong}}</view>
				</u-col>
			</u-row>
		</view>
	</block>
	<view class="loadtext"><u-loading-icon mode="circle" :vertical="true" size="20" textSize="12" text="加载更多信息"></u-loading-icon></view>
  </view>
</template>

<script>
  /* import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  import Page from '@/components/page' */

  const App = getApp()

  export default {
    components: {},
    data() {
      return {
		  imgUrl:this.$config.BASE_imgUrl,
        // 页面参数
		equipment:[
			{name:'投影仪',chose:false},
			{name:'白板',chose:false},
			{name:'转接头',chose:false},
			{name:'智真电话',chose:false},
			{name:'八爪鱼',chose:false},
			{name:'沙发',chose:false},
			{name:'台式电脑',chose:false},
			{name:'笔记本电脑',chose:false},
		],//弹窗中的设施列表
		people:[
			{name:'10人以下',chose:false},
			{name:'10-20人',chose:false},
			{name:'21-30人',chose:false},
			{name:'31-50人',chose:false},
			{name:'51-99人',chose:false},
			{name:'100人以上',chose:false},
		],//弹窗中的人数选择
	   show:false,
       showDate: false,
       dateValue: Number(new Date()),
	   dateText1:'2022-12-28',
	   dateText2:'14:00 至 16:00',
	   // meetingList:[
		  //  {pic:'/static/v2_rm94dp.png',name:'共享会议',weizhi:'A栋1001室',renshu:'5-10人',sheshi:'投影仪 笔记本 排插',feiyong:'10元/30分钟',zt:'1',ztname:'空闲'},
		  //  {pic:'/static/v2_rm94gx.png',name:'共享会议A1',weizhi:'A栋1001室',renshu:'5-10人',sheshi:'投影仪 笔记本 排插',feiyong:'10元/30分钟',zt:'2',ztname:'在用'},
		  //  {pic:'/static/v2_rm94kk.png',name:'共享会议A2',weizhi:'A栋1001室',renshu:'5-10人',sheshi:'投影仪 笔记本 排插',feiyong:'10元/30分钟',zt:'3',ztname:'满约'},
	   // ],
	   meetingList:[
	   		   {pic:'',name:'共享会议',weizhi:'A栋1001室',renshu:'5-10人',sheshi:'投影仪 笔记本 排插',feiyong:'10元/30分钟',zt:'1',ztname:'空闲'},
	   		   {pic:'',name:'共享会议A1',weizhi:'A栋1001室',renshu:'5-10人',sheshi:'投影仪 笔记本 排插',feiyong:'10元/30分钟',zt:'2',ztname:'在用'},
	   		   {pic:'',name:'共享会议A2',weizhi:'A栋1001室',renshu:'5-10人',sheshi:'投影仪 笔记本 排插',feiyong:'10元/30分钟',zt:'3',ztname:'满约'},
	   ],
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
      // 加载页面数据
      //this.getPageData();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 更新购物车角标
      //setCartTabBadge()
    },
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
    methods: {
		//跳转到详情页面
		jumpToDetail(val){
			console.log("详情：",val)
			uni.navigateTo({
				url: '/pagesB/meeting/detail'
			})
		},
		//检索筛选
		//筛选人数
		choseNum(e) {
			this.people[e.currentTarget.dataset.id].chose = !this.people[e.currentTarget.dataset.id].chose
		},
		//筛选设备
		choseEq(e) {
			this.equipment[e.currentTarget.dataset.id].chose = !this.equipment[e.currentTarget.dataset.id].chose
		},
		//重置
		reset() {
			for(let i = 0; i < this.equipment.length; i++){
				this.equipment[i].chose = false
			}
			for(let i = 0; i < this.people.length; i++){
				this.people[i].chose = false
			}
		},
		//确定
		confirm() {
			this.show = false
		},

		//筛选
		select(){
			this.show = true
		},
		close() {
			this.show = false
		},

		confirmDate(e) {
			console.log('confirm', e)
			this.showDate = false
		},
			formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
      /**
       * 加载页面数据
       * @param {Object} callback
       */
      getPageData(callback) {
        const app = this
        const pageId = app.options.pageId || 0
        Api.detail(pageId)
          .then(result => {
            // 设置页面数据
            const { data: { pageData } } = result
            app.page = pageData.page
            app.items = pageData.items
            // 设置顶部导航栏栏
            app.setPageBar();
          })
          .finally(() => callback && callback())
      },

      /**
       * 设置顶部导航栏
       */
      setPageBar() {
        const {
          page
        } = this
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: page.params.title
        });
        // 设置navbar标题、颜色
        uni.setNavigationBarColor({
          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
          backgroundColor: page.style.titleBackgroundColor
        })
      },

    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取首页数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
   page{
		background:#FFFFFF!important;
	}
  .container {
    background: #FFFFFF;
  }
  .select-title{
	  width: 60px;
	  height: 20px;
	  color: #000000;
	  font-size: 30rpx;
	  text-align: left;
	  margin: 20rpx 0 30rpx 40rpx;
  }
  .accommodate-people{
	  margin: 10rpx 20rpx 0 20rpx;
	  width: 220rpx;
	  height: 80rpx;
	  background-color: rgba(242, 242, 242, 1);
	  border-radius: 40rpx;
	  color: rgba(51, 51, 51, 1);
	  font-size: 26rpx;
	  text-align: center;
	  line-height: 80rpx;
	  font-family: Arial;
  }
  .bottom-button{
	  width: 100%;
	  position: absolute;
	  bottom: 60rpx;
  }
  .top-localtion{
	  margin:20rpx;
	  background:#FFFFFF;
	  padding:20rpx;
	  border-radius:12rpx;
  }
  .box1{
	 background:#FFFFFF;
	 text-align:center;
  }
  .searchinfo{
	  margin:10rpx 30rpx 30rpx 30rpx;
	  padding:10rpx 20rpx 10rpx 20rpx;
	  border:1px solid #F1F1F1;
	  background-color:#F8F8F8;
	  border-radius:20rpx;
  }
  .meeting-box{
	  margin:30rpx;
	  border:1px solid #f1f1f1;
	  position: relative;
	  box-shadow: 2px 4px 8px 1px rgba(0, 0, 0, 0.07);
	  border-radius:16rpx;
	  font-size:24rpx;
  }
  .line1{
	  padding:10rpx 0 20rpx 0;
	  border-bottom:1px solid #f1f1f1;
  }
  .line2{
  	  padding:20rpx 0 20rpx 6rpx;
	  border-bottom:1px solid #f1f1f1;
  }
  .line3{
  	  padding:20rpx 0 20rpx 0;
  }
  .chaxunbtn{
	  margin:0rpx auto;
	  width:80%;
	  background:#FFFFFF;
	  border:1px solid #ccc;
	  color: #999;
	  border-radius:30rpx;
	  display: block;
  }
  .zhuangtai{
	  position: absolute;
	  right:0;
	  top:20rpx;
	  border-radius:20rpx 0 0 20rpx;
	  background:#80C088;
	  color:#ffffff;
	  padding:10rpx 25rpx 10rpx 25rpx;
	  font-size:24rpx;
  }
  .bgcolor1{
	  background:#80C088;
	  color:#ffffff;
  }
  .bgcolor2{
  	  background:#E21111;
  	  color:#ffffff;
  }
  .bgcolor3{
  	  background:#E0CE31;
  	  color:#ffffff;
  }

  .imgbox{
	  margin:20rpx;
  }
  .imgurl{
	  width:180rpx;
	  border-radius:10rpx;
	  height:90rpx;
  }
  .title1{
	  font-size:32rpx;
	  font-weight: bold;
	  margin-bottom:10px;
  }
  .title2{
  	  font-size:28rpx;
  }
  .title3{
  	  font-size:28rpx;
  }
  .title4{
  	  font-size:28rpx;
  }
  .title5{
  	  font-size:28rpx;
	  color:#D95252;
	  margin-top:4px;
  }
  .loadtext{
  	  text-align:center;
  	  padding:30rpx 0 50rpx 0;
  	  font-size:24rpx;
  	  color: #999;
  }
	.list {
		width: 240rpx;
		margin-bottom: 20rpx;
	}
	.content{
		display: flex;
		width: 502rpx;
		flex-wrap: wrap;
	}
	.list-eq {
		width: 240rpx;
		margin-bottom: 20rpx;
	}
	.screen{
		  margin: 10rpx 20rpx 0 20rpx;
		  width: 220rpx;
		  height: 80rpx;
		  background-color: rgba(242, 242, 242, 1);
		  border-radius: 40rpx;
		  color: rgba(51, 51, 51, 1);
		  font-size: 26rpx;
		  text-align: center;
		  line-height: 80rpx;
		  font-family: Arial;
	}
	.add {
		background-color: #008EE5;
		color: #ffffff;
	}
</style>
